// flex容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）

// flex 左对齐 顶对齐

.flex {
  display: flex; //
  align-items: flex-start; // 项目在交叉轴上如何对齐
  justify-content: flex-start; // 项目在主轴上的对齐方式
}

// flex 左右居中，上下居中
.flex-center {
  display: flex; //
  align-items: center; // 项目在交叉轴上如何对齐
  justify-content: center; // 项目在主轴上的对齐方式
}
//两端对齐
.flex-between {
  display: flex; //
  align-items: center; // 项目在交叉轴上如何对齐
  justify-content: space-between; // 项目在主轴上的对齐方式
}

.flex-column {
  display: flex;
  flex-direction: column; // 项目主轴的排列方向。column：主轴为垂直方向，起点在上沿。
  align-items: flex-start;
  justify-content: flex-start;
}

// 垂直居中布局

.flex-cls-directcolumn {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
}

.flex-cls-directcolumn > div {
  white-space: nowrap;
}

// 左对齐布局

.flex-cls-direct-left {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

// 左对齐布局,换行

.flex-cls-directw-wrap-left {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

// 居中布局,不换行自动撑开

.flex-cls-left-link-auto-wid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-content: flex-start;
}

// 左对齐布局,换行不撑开，直接紧跟上一个换行

.flex-cls-directw-wrap-left-start {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
}

// 右对齐布局

.flex-cls-direct-right {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

// 两端对齐,不换行，项目之间的间隔都相等

.flex-cls-nowrap-spc-btw {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

// 两端对齐,不换行，每个项目两侧的间隔相等

.flex-cls-nowrap-spc-ard {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
}

// 两端对齐,超出换行，每个项目两侧的间隔相等

.flex-cls-wrap-spc-ard {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flex1 {
  flex: 1;
}

// 用于垂直布局，固定一个div高度，另一个div填充剩余的高度

.flex-colum-box {
  display: flex;
  flex-flow: column;
  align-items: stretch;
}

// 固定高度

.fixed-hig {
  flex: 0;
}

// 自动填充剩余区域

.auto-full-hig {
  flex: 1;
}

// 用于水平布局，固定一个div的宽度，另一个div填充剩余的宽度 //父级flex

.flex-width-box {
  display: flex;
}

// flex属性是flex-grow(放大比例）, flex-shrink（缩小比例） 和 flex-basis（根据剩余空间进行分配计算）的简写，默认值为0 1 auto。后两个属性可选。

// 自适应宽度的，css

.auto-full-width {
  flex: 1 1 auto;
}

// 固定宽度，不放缩

.fix-width {
  flex: 0 0 auto;
}
